<template>
	<view class="m-avatar">
		<image @click="click" :style="style" :src="isImg" :mode="mode"></image>
	</view>
</template>

<script>
	import { array } from '@/libs/fn/verify.js'
	import mIcon from './mIcon.js'
	export default {
		name: "m-icon",
		props: {
			type: {
				type: String,
				default: ''
			},
			size: {
				//图片模式下  宽高默认30
				//非图片模式  大小默认36 rpx
				type: [Number, String, Array],
				default: 36
			},
			color: {
				type: String,
				default: 'var(--text)'
			},
			spa: {
				default: '0',
				type: String,
			},
			size: {
				//宽高默认30
				type: [Number, String, Array],
				default: ''
			},
			radius: {
				type: String,
				default: '100',
			},
			mode: {
				type: String,
				default: 'aspectFill',
				/**
				 * 缩放
				 * scaleToFill   --- 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
				 * aspectFit   --- 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
				 * aspectFill   --- 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
				 * widthFix   --- 宽度不变，高度自动变化，保持原图宽高比不变
				 * heightFix   --- 高度不变，宽度自动变化，保持原图宽高比不变 App 和 H5 平台 HBuilderX 2.9.3+ 支持、微信小程序需要基础库 2.10.3。
				 * 裁剪
				 * bottom，center，left，right，top left，top right，bottom left，bottom right
				 */
			},
		},
		computed: {
			isImg() {
				if (!this.type) return '00'
				return mIcon[this.type.toLowerCase()] || this.type
			},
			style() {
				let style = {},
					width = 30,
					height = 30;
				const radius = this.radius.split(" ").filter(x => x);
				const spa = this.spa.split(" ").filter(x => x);
				if (this.size) {
					if (array(this.size)) {
						width = this.size[0]
						height = this.size[1]
					} else {
						height = width = this.size.toString()
					}
					style.width = `${width}rpx`
					style.height = `${height}rpx`
				}
				if (this.radius) {
					style.borderRadius = radius.map(n => `${n}rpx`).join(' ')
				}
				if (this.spa) {
					style.margin = spa.map(n => `${n}rpx`).join(' ')
				}
				return style
			}
		},
		data() {
			return {

			};
		},
		mounted() {},
		methods: {

			click() {
				this.$emit('click')
			},
		}
	}
</script>

<style lang="scss">
	.m-avatar {
		display: inline-block;
		font-size: 0;
		overflow: hidden;
		image {
			// background: #fff;
			margin: 0;
			padding: 0;
			background-size: 80% 80%;
			vertical-align: middle;
			display: inline-block;
		}
	}

	.rotate180 {
		display: inline-block;
		transform: rotate(180deg);
	}

	.uni-icons {
		display: block;
	}
</style>